<template>
  <div class="app-container table-container">

    <el-form ref="queryForm" :model="searchDate" :inline="true" label-width="68px">
      <el-form-item label="票务名称">
        <el-select
          v-model="searchDate.tictName"
          filterable
          placeholder="请选择票务名称"
          size="small"
          @change="changeAuditState"
        >
          <el-option
            v-for="item in tictData"
            :key="item.code"
            :label="item.name"
            :value="item.name"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="购票渠道">
        <el-select
          v-model="searchDate.purChaseCannal"
          size="small"
          filterable
          placeholder="请选择购票渠道"
          @change="changeAuditState"
        >
          <el-option
            v-for="cannal in cannalValue"
            :key="cannal.code"
            :label="cannal.name"
            :value="cannal.name"
          >{{ cannal.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="购票时间">
        <el-date-picker
          v-model="searchDate.purchaseDate"
          filterable
          size="small"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeAuditState"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @cliclk="queryOrder">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="restart">重置</el-button>
      </el-form-item>
    </el-form>
    <!--        <el-col>-->
    <!--            <label>商户:</label>-->
    <!--            <el-select filterable placeholder="请选择商户" @change='changeYard' style="width:150px" v-model="defaultAuditState">-->
    <!--                <el-option v-for="(ky,val) in auditState" :key="ky" :label="ky" :value="val"></el-option>-->
    <!--            </el-select>-->
    <!--        </el-col>-->
    <!--        <span>请选择</span>-->
    <!--        <el-select  filterable placeholder="请选择票务信息" @change='getTictValue'>-->
    <!--            <el-option-->
    <!--                    v-for="item in tictData"-->
    <!--                    :key="item.code"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.name">-->
    <!--                {{item.name}}-->
    <!--            </el-option>-->
    <!--        </el-select>-->
    <el-table
      :data="orderData"
      size="mini"
      :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
      highlight-current-row
      border
      style="font-size: 16px;"
      :summary-method="getSummaries"
      show-summary
    >
      <el-table-column prop="orderId" label="订单号" min-width="70" />
      <el-table-column prop="buyerName" label="购买用户" min-width="50" />
      <el-table-column prop="selkTime" label="购票时间" min-width="50" />
      <el-table-column prop="purchaseCanal" label="购买渠道" min-width="50" />
      <el-table-column prop="merchName" label="商户名称" min-width="50" />
      <el-table-column prop="tictName" label="票务名称" min-width="70" />
      -
      <!--            <el-table-column prop="tictCode" label="票代码" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="startTime" label="预约时间" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="yardName" label="场地名称" min-width="50"></el-table-column>-->
      <el-table-column prop="purchaseNumber" label="购买数量" min-width="50" />
      <el-table-column prop="purchaseMoney" label="购买金额" min-width="50" />
    </el-table>
    <el-row type="flex" justify="left" class="pagination">
      <el-pagination
        background
        :current-page="orderPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="orderPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>

  </div>
</template>

<script>
import { getDataForSP, writePageInfo } from '../../../utils/webUtils.js'

export default {
  name: 'Orderlist',
  components: {},
  data() {
    return {
      orderData: [],
      formAlignLeft: 'left',
      editBoxShow: false,
      addShow: false,
      editShow: false,
      pwdShow: false,
      userSchOn: '',
      userEdit: false,
      lookBoxShow: false,
      lookShow: false,
      uuid: '',
      cannalValue: [],
      tictData: [],
      searchDate: {
        purChaseCannal: '',
        tictName: '',
        purchaseDate: ''
      },
      defaultAuditState: '',
      pushDate:[],
      orderPage: {
        pageSize: 10, // 每页显示条目个数
        currentPage: 1, // 当前页数
        totalElements: 0,
        searchData: {
          adr: '',
          tictName: '',
          purChaseCannal: '',
          purchaseDate: ''
        }
      }
    }
  },
  mounted() {
    // 默认展示审核中的数据
    this.queryOrder(this.searchDate)
    // 票务信息
    this.queryTict()
    // 票务渠道
    this.queryCannal()
  },
  methods: {
    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === 'purchaseMoney') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          console.log(sums)
          sums[index]
        }
      })
      return sums
    },

    // 重置
    restart() {
      this.searchDate.purChaseCannal = ''
      this.searchDate.purchaseDate = ''
      this.searchDate.tictName = ''
      this.queryOrder(this.searchDate)
    },
    // 票务名称
    queryTict() {
      this.axios
        .request({
          method: 'get',
          url: './ope/kdi/merch/search/findByUser',
          params: {}
        })
        .then(response => {
          this.merchants = response.data[0]
          this.axios.request({
            method: 'get',
            url: './tck/kdi/tict/search/findByMerch',
            params: { merchUuid: this.merchants.uuid }
          }).then(response => {
            this.tictData = response.data.content
          }).catch(error => {
            console.log(error)
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 购买渠道
    queryCannal() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/PURCHASE_CANNAL',
          params: {}
        })
        .then(response => {
          this.cannalValue = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },

    lookTict(val) {
      this.uuid = val.uuid
      this.lookBoxShow = true
      this.lookShow = true
    },
    lookState() {
      this.lookBoxShow = true
      this.lookShow = true
    },
    // 查询
    changeAuditState() {
      this.queryOrder(this.searchDate)
    },
    // 获取所有数据
    queryOrder(param) {
      this.orderPage.searchData.tictName=param.tictName
      this.orderPage.searchData.purChaseCannal = param.purChaseCannal
      this.pushDate=param.purchaseDate
      if(this.pushDate.length>=2){
        //购票时间
        this.orderPage.searchData.startTime=(this.pushDate)[0];
        this.orderPage.searchData.endTime=(this.pushDate)[1];
      }
      this.axios.request({
        method: 'get',
        url: './tck/order/tck-order/findAll',
        params: getDataForSP(this.orderPage)
      }).then(response => {
        this.orderData = response.data.data
        writePageInfo(this.orderPage, response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    // 列表分页
    userSize: function(pageSize) {
      this.orderPage.pageSize = pageSize
      if (this.orderPage.currentPage === 1) {
        if (this.userSchOn !== '') {
          // this.userSearch();
        } else {
          this.queryOrder()
        }
      }
      this.orderPage.currentPage = 1
    },
    pgChge(currentPage) {
      this.orderPage.currentPage = currentPage
      this.queryOrder()
    }
  }
}
</script>

<style scoped lang="scss">
  @import "@/styles/table.scss";
  .app-container{
    .pagination{
      padding: 10px 0;
    }
  }

</style>
